<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html lang="en">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>伏魔记</title>
        <link rel="icon" href="favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="apple-mobile-web-app-title" content="伏魔记">
        <meta name="full-screen" content="yes"><!-- UC强制全屏 -->
        <meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
        <meta name="browsermode" content="application"><!-- UC应用模式 -->
        <meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
        <meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon.png"><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon.png"><!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon.png"><!-- Retina iPad，144x144 像素，可以没有，但推荐有 --><!-- iOS 图标 end -->
        <link rel="stylesheet" href="../../style/joystick.css">
        <link rel="stylesheet" type="text/css" href="../../views/baye.css" />
        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/encoding-indexes.js"></script>
        <script src="../../js/encoding.js"></script>
        <script src="../../js/sys.js"></script>
        <script src="../../js/kotlin.js"></script>
        <script src="../../js/keyboard.js"></script>
        <script src="../../js/font.js"></script>
        <script src="../../js/nipplejs.min.js"></script>
        <script src="../../js/jquery.mobile-events.js"></script>
        <script src="rom.js"></script>
        <style>

.fill {
    background-color: green;
    width: 320px;
    height: 192px;
}

        .button {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em; 
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover {
            text-decoration: none;
        }
        .button:active {
            position: relative;
            top: 1px;
        }
        .small {
            font-size: 22px;
            padding: .2em 1em .275em;
        }
        /* green */
        .green {
            color: #e8f0de;
            border: solid 1px #538312;
            background: #64991e;
            background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
            background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
        }
        .green:hover {
            background: #538018;
            background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
            background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }
        .green:active {
            color: #a9c08c;
            background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
            background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
        }

        body {
            background-color: white;
            margin:0px;
            padding:0px;
            overflow: hidden;
            width:100%;
        }

        #app{
            margin:0px;
            padding:0px;
            overflow: hidden;
            width:100%;
            height:100%;
        }

        .btn {
            position: absolute;
            display: block;
                // background: white;
            opacity: 0.5;
            border-radius: 50%;
                // box-shadow: 0px 0px 5px #555 inset;
                // border: 1px solid #000;
            width: 56px;
            height: 56px;
        }
        .btn img {
            width: 100%;
            height: 100%;
        }
        #btn_enter {

            right: 88px;
            top: 75px;
        }
        #btn_exit {
            top: 118px;
            right: 45px;

        }
        #btn_up {
            right: 45px;
            top: 32px;
        }
        #btn_down {
            right: 2px;
            top: 75px;
        }

        .landscape{
            transform : rotate(90deg) ;
        }

        #btn_enter.landscape{
            top:auto;
            bottom: 118px;
            right: 45px;
        }
        #btn_exit.landscape{
            top:auto;
            bottom: 75px;
            right: 88px;
        }
        #btn_up.landscape {
            right: 2px;
            top:auto;
            bottom: 75px;
        }
        #btn_down.landscape {
            right: 45px;
            top:auto;
            bottom: 32px;
        }

        .active {
            -webkit-transform: scale(1.2);
            -webkit-transform: opacity(0.9);
        }
        </style>
    </head>
    <body>
        <div id="app">
            <canvas class="fill" id="lcd" width="160" height="96"></canvas>
            <div id="version" style="position: absolute;background-color: gray;opacity: 0.8;color: white;top: 0;left: 0;"></div>
            <div id="zone"></div>
            <div class="btn" id="btn_enter" >
                <img src="../../images/enter.png" alt="" />
            </div>
                <div class="btn" id="btn_exit" >
                    <img src="../../images/exit.png" alt="" />
                </div>
                    <div class="btn" id="btn_up" >
                        <img src="../../images/up.png" alt="" />
                    </div>
                        <div class="btn" id="btn_down" >
                            <img src="../../images/down.png" alt="" />
                        </div>
        </div>
    </body>
    <script src="../../js/fmj.core.js"></script>
    <script>
        var core = window['fmj.core'].fmj
        $("#version").text("v" + core.game.version);


        function initScreen(){

            var height = window.innerHeight;
            var width = window.innerWidth;

            $("#app").css({
                'height': height + 'px', 
                'width': width + 'px',
            });

            if (height > width) {
                console.log('竖屏状态');
                $("#lcd").css({
                    'height': width + 'px', 
                    'width': height + 'px',
                    'transform-origin' : 'left top',
                    'transform' : 'rotate(-90deg) translateX(-' + height + 'px)',
                });

                lcdRotateMode = 2;
                $("#btn_enter,#btn_exit,#btn_down,#btn_up").removeClass('landscape')
            } else {
                console.log('横屏状态');
                $("#lcd").css({
                    'height' : height + 'px',
                    'width' : width + 'px',
                    '-webkit-transform' : 'rotate(0deg)',
                    'transform' : 'rotate(0deg)',
                }); 
                lcdRotateMode = 0;
                $("#btn_enter,#btn_exit,#btn_down,#btn_up").addClass('landscape')
            }
        }

(function(){
    document.getElementById('lcd').addEventListener('touchmove', function(e){e.preventDefault()}, false);
    document.getElementById('btn_enter').addEventListener('touchmove', function(e){e.preventDefault()}, false);
    document.getElementById('btn_exit').addEventListener('touchmove', function(e){e.preventDefault()}, false);
    $('#btn_enter').on('tapstart', function(e) { 
        console.log('User tapped'); 
        $(this).addClass("active");
        onKeyDown(7);
    });

    $('#btn_exit').on('tapstart', function(e) { 
        console.log('User tapped'); 
        $(this).addClass("active");
        onKeyDown(8);
    });

    $('#btn_up').on('tapstart', function(e) {
        $(this).addClass("active");
        onKeyDown(5);
    });

    $('#btn_down').on('tapstart', function(e) {
        $(this).addClass("active");
        onKeyDown(6);
    });

    $('#btn_enter,#btn_exit,#btn_up,#btn_down').on('tapend', function(e) {
        $(this).removeClass("active");
        e.preventDefault();
    });


    var init = function(){
        var updateOrientation = function(){//方向改变执行的函数
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                    modal = 'landscape'; //这里是横屏
                    initJoystick();
                    initScreen()
                    break;
                default:
                    modal = 'portrait'; //这里是竖屏
                    initJoystick();
                    initScreen()
                    break;
            }
            //html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
            //加上portrait
            document.body.parentNode.setAttribute('class',orientation);
        };
        // 每次旋转，调用这个事件。
        window.addEventListener('orientationchange',updateOrientation,false);
        // 事件的初始化
        updateOrientation();
    };
    window.addEventListener('DOMContentLoaded',init,false);
})();



var interval;
var modal;
var joystickHold = false;
var joystick;
function setIntervalKeyDown(key){
    onKeyDown(key);
    clearInterval(interval);
    //setTimeout(function(){
    interval = setInterval("onKeyDown(" + key + ")", 450);
    //}, 600)
}

function initJoystick(){
    var position = {
        left: '15%',
        top: '75%'
    };

    if (modal == 'portrait'){
        position = {
            left: '80%',
            top: '85%'
        };
    }

    var options = {
        zone: document.getElementById('zone'),
        //threshold : 1,
        mode: 'static',
        position: position,
        color: 'white'
    }
    if(joystick){
        joystick.destroy()
    }
    joystick = nipplejs.create(options);
    joystick.on('dir:up', function (evt, nipple) {
        setIntervalKeyDown(modal == 'portrait' ? 4 : 1)
    }).on('dir:down', function (evt, nipple) {
        setIntervalKeyDown(modal == 'portrait' ? 3 : 2)
    }).on('dir:left', function (evt, nipple) {
        setIntervalKeyDown(modal == 'portrait' ? 1 : 3)
    }).on('dir:right', function (evt, nipple) {
        setIntervalKeyDown(modal == 'portrait' ? 2 : 4)
    }).on('end', function (evt, nipple) {
        console.log('end')
        clearInterval(interval);
    });
}
    </script>
</html>
